import React from 'react'
import {useEffect} from "react"
import * as action from "../../action"
import {useNavigate} from "react-router-dom"
import { ProductCard,Tag, Button } from 'react-vant';
import {useDispatch,useSelector} from "react-redux"
function Shophome() {
  let navigate = useNavigate()
  let dispatch = useDispatch() //dispatch 是用来触发action的
  let store = useSelector((state)=>{  // 将仓库中的数据赋值给组件
    return {
      ...state.shopcarreducer
    }
  })
  console.log(store.arr,111111);
  useEffect(()=>{
    // 第一步 组件中调用ation中的方法
    dispatch(action.getlist())

  },[])
  let goDetail = (item)=>{
      console.log(item,"item");
      navigate("/detail",{
        state:{
          item
        }
      })
  }
  return (
    <div>
       {
         store.arr && store.arr.length ?  store.arr.map((item,index)=>{
            return   <ProductCard
                        key={index}
                        num={item.num}
                        price={item.price}
                        desc={item.des}
                        title={item.tit}
                        thumb={item.img}
                        onClick={()=>goDetail(item)}
                    />
         }):""
       }
    </div>
  )
}

export default Shophome